<template>
    <div id="StepExplore" >
        <div class="StepExplore_warpper" :class=" 'thumbImg' + thumbImgsArry.length.toString() " v-if="!showVideo" >
            <div v-for="(item, index) in thumbImgsArry" :key="index" class="single_thumb" :class=" 'item'+index.toString() " @click="lookSingleVideo(item.src)">
                <img :src="item.thumbSrc" alt="">
            </div>
        </div>
        <div class="video_warpper" v-if="showVideo">
            <div class="ani-op ">
                <div class="videoBox flex-center"  :v-if="thumbImgsArry[currentV] " :key="currentV">
                    <video :src="videoSrc" :controls="false"  preload  controlsList="nodownload" ref="myvideo" @click="clickPlay"></video>
                </div>
                <div class="mycontrols" v-if="isShowControl">
                    <div class="step_warpper" >
                        <div class="step">
                            <div class="step_box" >
                                <div v-for="(item,index) in stepList" :key="index" class="single_step" @click="changeStep(item.type,index)">
                                    {{ getfileName(item.text , index)}}
                                </div>
                            </div>
                        </div>
                        <button class="back" @click="back">返回</button>
                    </div>
                    <div class="control" >
                        <div class="control_ele" >
                            <img style="width: 24px;width: 24px;" v-if="isPause" src="../../assets/img/play.png" alt="" @click="play"><img style="width: 24px;height: 24px;" v-if="!isPause" src="../../assets/img/pause.png" alt="" @click="play">
                            <div style="margin-left: 20px;color: #fff;font-size: 14px;width: auto;display: flex;align-items: center;">
                                <div>
                                    <span>{{ minuteTens }}</span>
                                    <span>{{ minuteUnits }}</span>
                                    <span> : </span>
                                    <span>{{ secondTens }}</span>
                                    <span>{{ secondUnits }}</span>
                                    <span style="padding: 0 5px 0 3px; ">/</span>
                                </div>
                                <div class="videoTime">
                                    <span>{{ total_minuteTens }}</span>
                                    <span>{{ total_minuteUnits }}</span>
                                    <span> : </span>
                                    <span>{{ total_secondTens }}</span>
                                    <span>{{ total_secondUnits }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="control_ele video_slider" >
                            <div><el-slider class="sliderBox" v-model="sliderVal" :show-tooltip="false" input-size="large" :max="max"  height="16px" @change="changeSliderVal"></el-slider></div>
                        </div>
                        <div class="control_ele" style="width: 120px;justify-content: flex-end;" >
                            <img style="width: 24px;height: auto;" v-if="volume != 0" src="../../assets/img/vioce.png" alt="" ><img  v-if="volume== 0 " style="width: 24px;height: auto;" src="../../assets/img/mute.png" alt="">
                            <div  class="volumeBox" style="margin-left: 15px;">
                                <el-slider  class="volumeBox"  height="16px" v-model="volume" :show-tooltip="false" input-size="large" :max="100"  @change="changeVolume"></el-slider>
                                <span style="margin-left: 10px;">{{ volume }}</span>
                            </div>
                            <!-- <img style="width: 24px;margin-left:20px;" src="../../assets/img/fullScreen.png" alt="" @click="fullScreen"> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lookAll" v-if="!showVideo">
            <button @click="lookFull">
                <img src="../../assets/img/StepExplore/play.png" alt="">
                查看完整步骤
            </button>
        </div>
    </div>
</template>
<script>
import bus from '../../utils/bus.js'
import mixin from '../../mixin/mixin'
export default {
    name: "StepExplore",
    mixins: [mixin],
    data() {
        return {
            thumbImgsArry: [],
            currentAngle: 0,
            showVideo: false,
            videoSrc:null,
            fullVideo:null,
            isShowControl:true,
            sliderVal:0,
            volume:50,
            videoTime:0,
            minuteTens: 0,
            minuteUnits: 0,
            secondTens: 0,
            secondUnits: 0,
            totalTime:0,
            total_minuteTens: 0,
            total_minuteUnits: 0,
            total_secondTens: 0,
            total_secondUnits: 0,
            max:100,
            isPause:true,
            // showVolume:false,
            currentTime:0,
            stepList:[],
            currentV:0,
        }
    },
    
    mounted() {
        if (this.bsr.explore) {
            this.bsr.explore.forEach((v,i) => {
                if ( v.type == 0 ) {
                    this.fullVideo = v
                    let fileSuffix = this.getFileSuffix(v.file_name)
                    this.fullVideo.src = window.$DATADIR + `resc/StepExplore/${this.bsr.id}/${v.type === 0 ? v.file_name.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, fileSuffix) : v.file_name.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, '.bosm')}`
                    return
                }else{
                    this.stepList.push(v)
                    let obj = { src: '', thumbSrc: '', title: '', type: '' }
                    let thumbSuffix = this.getFileSuffix(v.thumb_name)
                    // if (thumbSuffix !== '') {
                        
                    // }
                    console.log(thumbSuffix,thumbSuffix);
                    let fileSuffix = this.getFileSuffix(v.file_name)
                    obj.title = v.text
                    obj.type = v.type
                    obj.thumbSrc = window.$DATADIR + `resc/StepExplore/${this.bsr.id}/${v.thumb_name.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, thumbSuffix)}`
                    obj.src = window.$DATADIR + `resc/StepExplore/${this.bsr.id}/${v.type === 0 ? v.file_name.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, fileSuffix) : v.file_name.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, '.bosm')}`
                    this.thumbImgsArry.push(obj)
                    
                }
            })
            this.stepList.push(this.fullVideo )
            console.log(this.thumbImgsArry,this.bsr , this.stepList)
            // let arr = this.thumbImgsArry
            // this.thumbImgsArry = this.thumbImgsArry.concat(this.thumbImgsArry).concat(arr)
            // this.thumbImgsArry.pop()
            // this.thumbImgsArry.pop()
        }
    },
    watch: {
        currentTime(nval,oval){
            if (nval - oval == 1) {
                console.log(oval,nval,'change');
            }
            if (this.currentTime >= this.videoTime) {
                this.currentTime = this.videoTime
            }
        }
    },
    methods: {
        lookFull(){
            this.showVideo = true
            this.videoSrc = this.fullVideo.src
            setTimeout(() => {
                this.videoTime =  Math.floor(this.$refs.myvideo.duration)
                this.getVideoTime()
            }, 100);
            bus.$emit('hideIntro',true) 
        },
        lookSingleVideo(src){
            this.showVideo = true
            this.videoSrc = src
            setTimeout(() => {
                this.videoTime =  Math.floor(this.$refs.myvideo.duration)
                this.getVideoTime()
            }, 100);
            bus.$emit('hideIntro',true) 
        },
        changeSliderVal(val){
            console.log(val);
            this.$refs.myvideo.currentTime = Math.round(val*this.$refs.myvideo.duration/100)
            // console.log('currentTime',this.$refs.myvideo.currentTime);
            this.currentTime = this.$refs.myvideo.currentTime
            this.countDown();
        },
        getfileName(name,index){
            let prefix = (index+1).toString()+' 、'
            return prefix+name
        },
        clickPlay(){
            // console.log(this.$refs.myvideo.paused);
            if (this.$refs.myvideo.paused) {
                this.play()
            }else{
                this.isShowControl = true
                this.isPause = true
                this.$refs.myvideo.pause()
            }
        },
        async getVideoTime(){
            let _this = this
            let minutes = parseInt(_this.videoTime / 60);
            let seconds = _this.videoTime % 60
            console.log('minutes',minutes,seconds);
            if (minutes >= 10) {
                minutes = minutes + "";
                this.total_minuteTens = parseInt(minutes.substring(0, 1));
                this.total_minuteUnits = parseInt(minutes.substring(1, 2));
            } else {
                minutes = minutes + "";
                this.total_minuteTens = 0;
                this.total_minuteUnits = parseInt(minutes)
            }
            if (seconds >= 10) {
                seconds = seconds + "";
                this.total_secondTens = parseInt(seconds.substring(0, 1));
                this.total_secondUnits = parseInt(seconds.substring(1, 2));
            } else {
                seconds = seconds + "";
                this.total_secondTens = 0;
                this.total_secondUnits = parseInt(seconds);
            }
        },
        play(){
            if (this.isPause == true) {
                let _this = this
                _this.isPause = false
                _this.$refs.myvideo.play()
                setTimeout(() => {
                    let timeRange = this.$refs.myvideo.duration - this.$refs.myvideo.currentTime
                    if (timeRange >= 2) {
                        _this.isShowControl = false
                    }
                }, 1500);
                _this.videoTime =  Math.floor(this.$refs.myvideo.duration)
                _this.setTimeInterval()

                _this.max = Math.floor(100 / 100 * this.videoTime * 6) * 100 / this.videoTime / 6 
                this.$refs.myvideo.addEventListener('timeupdate',function () {
                    let currentTime = _this.$refs.myvideo.currentTime
                    _this.currentTime = Math.round(currentTime) 
                    let progress = currentTime/_this.videoTime
                    _this.sliderVal = progress*100
                    // console.log('当前时间:',_this.currentTime,'进度：',progress,'总时间',_this.videoTime);
                })
                this.$refs.myvideo.addEventListener('ended',function () {
                    console.log('播放结束');
                    _this.isPause = true
                    _this.isShowControl = true
                })
            }else{
                this.$refs.myvideo.pause()
                this.isPause = true
            }
        },
        changeStep(type,index){
            if (type == 0) {
                this.videoSrc = this.fullVideo.src
            }else{
                this.currentV =index
                this.videoSrc = this.thumbImgsArry[index].src
            }
            this.isPause = true
            this.currentTime = 0
            this.videoTime =  Math.floor(this.$refs.myvideo.duration)
            this.getVideoTime()
        },
        changeVolume(val){
            this.$refs.myvideo.volume = (val/100)
            console.log(this.$refs.myvideo.volume );
        },
        fullScreen(){
            this.$refs.myvideo.requestFullscreen();
        },
        setTimeInterval () {
            if (window.countDownTimeOut) {
                clearInterval(window.countDownTimeOut);
                window.countDownTimeOut = null;
            }
            let _this = this;
            window.countDownTimeOut = setInterval(function () {
                if (_this.currentTime >= _this.videoTime) {
                    _this.currentTime = _this.videoTime
                    clearInterval(window.countDownTimeOut);
                } else {
                }
                _this.countDown();
            }, 1000);
        },
        async countDown() {
            let minutes = parseInt(this.currentTime / 60);
            let seconds = this.currentTime % 60
            if (minutes >= 10) {
                minutes = minutes + "";
                this.minuteTens = parseInt(minutes.substring(0, 1));
                this.minuteUnits = parseInt(minutes.substring(1, 2));
            } else {
                minutes = minutes + "";
                this.minuteTens = 0;
                this.minuteUnits = parseInt(minutes)
            }
            if (seconds >= 10) {
                seconds = seconds + "";
                this.secondTens = parseInt(seconds.substring(0, 1));
                this.secondUnits = parseInt(seconds.substring(1, 2));
            } else {
                seconds = seconds + "";
                this.secondTens = 0;
                this.secondUnits = parseInt(seconds);
            }
        },
        back(){
            this.isPause = true
            this.sliderVal = 0
            this.currentTime = 0
            this.$refs.myvideo.currentTime = 0
            this.showVideo = false
            bus.$emit('hideIntro',false) 
        },
    },
}
</script>

<style lang="scss" scoped>
#StepExplore {
    max-width: 100vw;
    height: calc(100vh - 30px);
    background-image: url(../../assets/img/echarts_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    @keyframes opacity {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .ani-op {
        animation: opacity 0.7s ease forwards;
    }
    .thumbImg2{
        grid-template-columns: auto  auto !important
    }
    .thumbImg2,.thumbImg3,.thumbImg5,.thumbImg6{
        grid-template-columns: auto auto auto !important;
    }
    .thumbImg5,.thumbImg6,.thumbImg7,.thumbImg8{
        padding-top:6vw!important;;
    }
    .thumbImg5{
        .item0 {
          grid-area: 1 / 1 / span 1 / span 2;
        }
        .item1 {
          grid-area: 1 / 2 / span 1 / span 2;
        }
    }
    .thumbImg7{
        .item0 {
          grid-area: 1 / 1 / span 1 / span 2;
        }
        .item1 {
          grid-area: 1 / 2 / span 1 / span 2;
        }
        .item2 {
          grid-area: 1 / 3 / span 1 / span 2;
        }
        // .item4,.item5,.item6{
        //     position: relative;
        //     left: 10.4vw;
        // } 
    }
    .StepExplore_warpper{
        margin: 0 auto;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 2.6vw;
        // position: relative;
        // top: -2vw;
        padding-top:14.4vw;
        .single_thumb{
            padding: 0;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            img{
                width: 20.8vw;
                height: 14.3vw;
                cursor: pointer;
                border-radius: 8px;
                
            }
        }
    }
    .lookAll{
        position: absolute;
        bottom: 85px;
        left: calc(50% - 135px);
        button{
            width: 270px;
            height: 65px;
            background: #FFFFFF;
            border-radius: 8px;
            border: none;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 32px;
                margin-right: 15px;
            }
        }
    }
    .video_warpper{
        z-index: 999;
        position: absolute;
        top: 30px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 30px);
        overflow: hidden;
        background-color: #fff;
        .videoBox{
            video{
                animation: opacity 2s ease forwards;
                width: 100vw;
                height: calc(100vh - 30px);
                min-height: calc(100vh - 30px);
            }
        }
    }
    .mycontrols{
        padding: 0;
        z-index: 999;
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 128px;
        box-sizing: border-box;
        transition: all .5s ease-in;
        .sliderBox{
            width: 72vw;
            margin: 0 auto;
            height: 24px;
        }
        .volumeBox{
            // width: auto;
            // height: 200px;
            width: 120px;
            color: #fff;
            display: flex;
            align-items: center;
        }
        .control{
            background: rgba(0,0,0,0.48);
            width: 100%;
            height: 64px;
            padding: 0 3%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            // padding-top: 20px;
            img{
                cursor: pointer;
            }
            .control_ele{
                display: flex;
                align-items: center;
            }
            
        }
        .step_warpper{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 64px;
            padding: 10px 3%;
            box-sizing: border-box;
            background-color: rgba(0,0,0,0.25) ;
            .step{
                .step_box{
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    font-size: .7vw;
                    .single_step{
                        width: auto;
                        box-sizing: border-box;
                        white-space: nowrap;
                        padding: 0 20px;
                        margin-right: 1.5vw;
                        height: 32px;
                        line-height: 32px;
                        background: rgba(0,0,0,0.48);
                        border-radius: 5px;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }
            .back{
                width: 89px;
                height: 38px;
                font-size: 14px;
                background: rgba(0,0,0,0.48);
                border-radius: 5px;
                color: #fff;
                border: none;
                cursor: pointer;
            }
        }
    }
}
</style>
<style scope lang="scss">
.mycontrols{
    .el-slider__bar{
        border-radius: 9px;
        height: 5px;
        background: #fff;
    }
    .el-slider__runway{
        height: 5px;
    }
    .video_slider{
        .el-slider__runway{
            margin: 10px 0 0 0 ;
        }
        .el-slider__bar{
            transition: all .3s linear;
        }
        .el-slider__button-wrapper{
            transition: all .3s linear;
        }
    }
    .el-slider__button-wrapper{
    }
    .el-slider__button{
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        background: #fff;
    }
}
</style>